<template>
    <div class="m-logo">
        <img class="m-logo__img" src="https://cdn.jsdelivr.net/gh/acgboxlink/acgbox/logo/box.svg" height="40" v-if="isSideOpen">
        <img class="m-logo__img" src="https://cdn.jsdelivr.net/gh/acgboxlink/acgbox/logo/86742914_p0.png" height="40" v-else>
    </div>
</template>

<script>
export default {
    name: 'm-logo',
    computed: {
        isSideOpen() {
            return this.$store.state.isSideOpen;
        },
    },
}
</script>

<style lang="scss" scoped>
.m-logo {
    width: 100%;
    line-height: 74px;
    text-align: center;
    box-shadow: 0 1px 0 0 rgb(41 48 66 / 10%) !important;
    overflow: hidden;
    &__img {
        vertical-align: middle;
    }
}
</style>